<template>
  <view class="course">
    <view
      class="course-item"
      v-for="item in courseList"
      :key="item.id"
      @click="handleItemClick(item)"
    >
      <view class="course-item-label-text">
        <view class="course-item-label">课程名称:</view>
        <view class="course-item-text">{{ item.courseName }}</view>
      </view>
      <view class="course-item-label-text">
        <view class="course-item-label">上课日期:</view>
        <view class="course-item-text">{{ item.courseStartDate }} ~ {{ item.courseEndDate }}</view>
      </view>
      <view class="course-item-label-text">
        <view class="course-item-label">上课时间:</view
        ><view class="course-item-text">{{ item.courseStartTime }} ~ {{ item.courseEndTime }}</view>
      </view>
      <view class="course-item-label-text">
        <view class="course-item-label">游泳课班级:</view>
        <view class="course-item-text">{{ item.swimPlaceClassName }}</view>
      </view>
      <view class="course-item-label-text">
        <view class="course-item-label">上课地址:</view>
        <view class="course-item-text">{{ item.address }}</view>
      </view>
      <view class="course-item-label-text">
        <view class="course-item-label">限制报名人数:</view>
        <view class="course-item-text">{{ item.limitNum }}人</view>
      </view>
      <view class="course-item-label-text">
        <view class="course-item-label">已报名人数:</view>
        <view class="course-item-text">{{ item.signupNum || 0 }}人</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';

  import { listCourse } from '@/api/course.js';

  import { goBack } from '@/utils/app';

  const swimPlaceId = ref();
  onLoad((option) => {
    swimPlaceId.value = option.swimPlaceId;
  });

  onMounted(() => {
    listCourseReq();
  });

  const courseList = ref([]);
  const listCourseReq = async (pageNo) => {
    const res = await listCourse(pageNo, swimPlaceId.value);
    const rows = res.rows || [];
    courseList.value = rows;
  };

  const handleItemClick = (item) => {
    uni.$emit('__selectCourse__', item);
    goBack();
  };
</script>

<style scoped lang="scss">
  .course {
    padding-bottom: 100rpx;
    display: flex;
    flex-direction: column;

    .course-item {
      margin: 24rpx 24rpx 0rpx 24rpx;
      padding: 24rpx;
      border-radius: 16rpx;
      background: #ffffff;

      display: flex;
      flex-direction: column;

      .course-item-label-text {
        display: flex;
        margin-top: 16rpx;
        .course-item-label {
          color: #202020;
          font-family: PingFang SC;
          font-size: 28rpx;
          width: 180rpx;
        }
        .course-item-text {
          color: #202020;
          font-family: PingFang SC;
          font-size: 28rpx;
        }
      }
      .course-item-label-text:first-child {
        margin-top: 0rpx;
      }
    }
  }
</style>
